page-message-list {
    @function computed-vw($px) {
        @return $px/1080*100vw;
    }
    ion-content{
        background: #f5f5f5!important;
        .content-ios{
            background: #f5f5f5!important;
        }
        .search-key-wrapper{
            background:linear-gradient(to right, #63b24c, #018c6e);
            border:none;
            border-radius:6vw;
            display:flex;
            align-items: center;
            width:88.89vw;
            height: 11.57vw;
            margin:5.55vw auto;
            i{
                width:4.5vw;
                height:4.5vw;
                margin:auto 3vw auto 2vw;
                background-image:url(../assets/images/client/client-list/icon_search.png);
                background-size:cover;
                background-repeat:no-repeat;
            }
            input{
                width:68vw;
                margin-left: 7.5vw;
                background:none;
                height:7vw;
                border:none;
                font-size:3.89vw;
                margin-right: 0;
                color:#fff;
                &::placeholder{
                    color:#fff;
                }

            }
        }
        .info-hd {
            margin-top: computed-vw(60);
            margin-bottom: computed-vw(60);
            padding-left: computed-vw(60);
            overflow: hidden;
            .search-bar {
                float: left;
                width: computed-vw(1080-120-220-30);
                height: computed-vw(124);
                padding: 0 10vw 0 5vw;
                background: linear-gradient(to right, #63b24c, #018c6e);
                border-radius: computed-vw(62);
                position: relative;
                input {
                    height: 100%;
                    font-size: computed-vw(45);
                    border: none;
                    padding: 0;
                    background:none;
                    color: #fff;
                    width:100%;
                    &::placeholder {
                        color: rgba(255, 255, 255, 0.5);
                    }
                    &:focus {
                        outline: none;
                        border: none;
                    }
                }
                i {
                    position: absolute;
                    width: 4.5vw;
                    height: 4.5vw;
                    top: (computed-vw(124) - 4.5)/2;
                    background-image: url(../assets/images/client/client-filter/icon_search.png);
                    background-size: 100% 100%;
                    right: 5vw;
                }
            }
            .button-ios {
                margin: 0 0 0 computed-vw(30);
                font-size: computed-vw(45);
                color: #fff;
                background-color: #f2b91c;
                height: computed-vw(124);
                border-radius: computed-vw(62);
                width: computed-vw(220);
                text-align: center;
            }
        }
        ion-list{
            padding:0;
            width:100%;
            left:0;
            .message-panel{
                width:100%;
                background: #f5f5f5;
                padding-bottom: 4.167vw;
            }
            ion-item-sliding{
                height: 100%;
                background-color: #f5f5f5!important;
                overflow: hidden!important;
                ion-item{
                    height: 100%;
                    color: #1f212a;
                    padding: computed-vw(45)!important;
                    width: 89vw!important;
                    margin: 0 auto!important;
                    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.05);
                    border-radius: 0;
                    .item-inner{
                        padding:0!important;
                    }
                    .label-ios{
                        font-size: 3.88vw;
                        margin:0;
                        position: relative;
                        .into-arrow{
                            display: block;
                            position: absolute;
                            width:computed-vw(13);
                            height:computed-vw(22);
                            right:0;
                            top:50%;
                            margin-top: computed-vw(-11);
                            background-repeat: no-repeat;
                            background-image: url(../assets/images/information/icon_arrow.png);
                            background-size: contain;
                        }
                    }
                    p{
                        margin:0;
                        width: 100%;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                    .title-panel{
                        font-size:computed-vw(45);
                        color:#333;
                        margin-bottom:computed-vw(28);
                        .preview{
                            color:#d40509;
                        }
                    }
                    .title-panel.read{
                        color:#999;
                    }
                    .time-panel{
                        font-size:3.33vw;
                        color:#939598;
                        display: flex;
                        align-items: center;
                        .pulish-time{
                            //line-height: computed-vw(80);
                            //display: inline-block;
                            //height:computed-vw(80);
                        }
                        .msg-collect{
                            display: inline-block;
                            width:computed-vw(204);
                            height:computed-vw(80);
                            margin-left: computed-vw(24);
                            /*background: url(../assets/images/information/collection_selected.png) no-repeat !important;
                            background-size: contain !important;
                            background-position: 0 50%;*/
                            img{
                                display: inline-block;
                                width:100%;
                                hegith:100%;
                            }
                        }
                    }
                }
                ion-item-options{
                    height: 100%;
                    overflow: hidden;
                    border:0!important;
                    right: 5.55vw;
                    background-color: #fff!important;
                    .button-ios{
                        background-color: #e66660!important;
                        padding:0!important;
                        width:18.33vw;
                        i{
                            width:6.67vw;
                            height:6.67vw;
                            background: url("../assets/images/client/client-note/ic_list_delete.png") no-repeat;
                            background-size: cover;
                        }
                    }
                }
            }
            ion-item-sliding.active-slide{
                .into-arrow{
                    display: none!important;
                }
            }
            ion-item-sliding:before{
                content: '';
                display: block;
                width: 5.55vw;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                background-color: #f5f5f5;
                z-index: 2;
            }
        }
    }
}
